<template>
  <div>
    <div>
      <div class="pad-l-30 pad-r-30 mar-l-20 mar-r-20">
        <el-tabs v-model="appType" @tab-click="handleClick">
          <el-tab-pane v-if="!enterpriseConfig.shopSelectionAuthority" label="云店小程序" name='10'></el-tab-pane>
          <el-tab-pane v-if="enterpriseConfig.wholesaleAuthority == 1" label="批发小程序" name='11'></el-tab-pane>
        </el-tabs>
      </div>
      <div class="sel-temp-layer">
        <div class="temp-item flex flex-center" v-for="(item, index) in tempData" :key="index">
          <div>
            <h2 class="flex v-align-c">
              <span>{{ item.title }}</span>
              <el-tooltip class="item" effect="dark" :content="item.content" placement="top">
                <span class="width-22 height-22 mar-l-6"><img :src="autIcon" class="width-22 height-22" border="0px"></span>
              </el-tooltip>
            </h2>
            <div class="img-bar" :class="item.show ? 'actived' : 'default'"  @click="selTemp(item)">
              <img v-if="item.show" :src="temSel" class="tem-sel width-35 height-32" border="0px">
              <img :src="item.img" class="width-198 height-311" border="0px">
            </div>
            <div class="flex v-align-c pad-t-17 height-40">
              <template v-if="appType == '10' && (index === 'template1' || index === 'template2')">
                <div class="pad-r-10 pad-l-30 mar-l-8">{{item.showFlag ? '已开启' : '已关闭'}}快速购买</div>
                <el-switch v-model="item.showFlag" active-color="#13ce66" inactive-color="#e5e5e5"></el-switch>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer mar-t-20">
      <el-button @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
  import { listCategoryTemplate, saveList } from '@/api/goods/categoryTemplate'
  import { getByEnterpriseId } from '@/api/user/enterprise'
  import tempImg1 from '@/assets/images/temp-1.jpg'
  import tempImg2 from '@/assets/images/temp-2.jpg'
  import tempImg3 from '@/assets/images/temp-3.jpg'
  import tempImg4 from '@/assets/images/temp-4.jpg'
  import tempImg5 from '@/assets/images/temp-5.jpg'
  import autIcon from '@/assets/images/icon-aut-2.png'
  import temSel from '@/assets/images/icon-tem-sel.png'

  export default {
    data() {
      return {
        // 应用类型 10:云店  11：批发
        appType: '10',
        // 图标
        autIcon: autIcon,
        // 模板数据
        tempData: {},
        // 选中外框图
        temSel: temSel,
        // 云店小程序模板 key value
        shopAppTempMap: {},
        // 云店小程序模板
        shopAppTmepData: this.initShopAppTmepData(),
        // 批发小程序模板 key value
        wholesaleAppTempMap: {},
        // 批发小程序模板
        wholesaleAppTmepData: this.initWholesaleAppTmepData(),
        // 分类模板数据集合
        categoryTemplateList: [],
        // 企业配置信息
        enterpriseConfig: {
          shopSelectionAuthority: 0
        }
      }
    },
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.appType = '10'
          this.shopAppTmepData = this.initShopAppTmepData()
          this.wholesaleAppTmepData = this.initWholesaleAppTmepData()
          this.getTemplate()
        }
      }
    },
    // 初始化页面
    created() {
      this.shopAppTmepData = this.initShopAppTmepData()
      this.wholesaleAppTmepData = this.initWholesaleAppTmepData()
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      })
      this.getTemplate()
    },
    methods: {
      // 无模板数据时初始化
      initList() {
        const shopData = {
          templateType: '',
          quickBuy: 0,
          appType: 10,
          enterpriseId: this.getEnterpriseId()
        }
        const wholesaleData = {
          templateType: '',
          quickBuy: 0,
          appType: 11,
          enterpriseId: this.getEnterpriseId()
        }
        this.categoryTemplateList = []
        this.categoryTemplateList.push(shopData)
        this.categoryTemplateList.push(wholesaleData)
      },
      // 初始化云店小程序模板数据
      initShopAppTmepData() {
        this.shopAppTempMap = {
          1: 'template1',
          2: 'template2',
          3: 'template3',
          4: 'template4'
        }
        return {
          'template1': { title: '简易型一', type: 1, img: tempImg1, show: false, showFlag: false, content: '仅显示一级分类图标根据后台设置对应显示' },
          'template2': { title: '简易型二', type: 2, img: tempImg2, show: false, showFlag: false, content: '仅显示俩级分类图标根据后台设置对应显示，若商品没有设置二级分类则无法正常显示' },
          'template3': { title: '传统型一', type: 3, img: tempImg3, show: false, showFlag: false, content: '仅显示俩级分类图标根据后台设置对应显示，若商品没有设置二级分类则无法正常显示' },
          'template4': { title: '传统型二', type: 4, img: tempImg4, show: false, showFlag: false, content: '显示三级分类图标根据后台设置对应显示，若商品没有设置三级分类则无法正常显示' }
        }
      },
      // 初始化批发小程序模板数据
      initWholesaleAppTmepData() {
        this.wholesaleAppTempMap = {
          1: 'template1',
          2: 'template2',
          3: 'template4',
          4: 'template5',
          5: 'template3'
        }
        return {
          'template1': { title: '简易型一', type: 1, img: tempImg1, show: false, showFlag: false, content: '仅显示一级分类图标根据后台设置对应显示' },
          'template2': { title: '简易型二', type: 2, img: tempImg2, show: false, showFlag: false, content: '仅显示俩级分类图标根据后台设置对应显示，若商品没有设置二级分类则无法正常显示' },
          'template3': { title: '简易型三', type: 5, img: tempImg5, show: false, showFlag: false, content: '仅显示一级分类图标根据后台设置对应显示' },
          'template4': { title: '传统型一', type: 3, img: tempImg3, show: false, showFlag: false, content: '仅显示俩级分类图标根据后台设置对应显示，若商品没有设置二级分类则无法正常显示' },
          'template5': { title: '传统型二', type: 4, img: tempImg4, show: false, showFlag: false, content: '显示三级分类图标根据后台设置对应显示，若商品没有设置三级分类则无法正常显示' }
        }
      },
      // tab切换事件
      handleClick() {
        if (this.appType === '10') {
          this.tempData = this.shopAppTmepData
        } else {
          this.tempData = this.wholesaleAppTmepData
        }
      },
      // 获取分类模板数据
      getTemplate() {
        listCategoryTemplate(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          if (response.data.categoryTemplateList && response.data.categoryTemplateList.length > 0) {
            this.categoryTemplateList = response.data.categoryTemplateList
            // 赋值处理
            const shopCategoryTemplate = this.categoryTemplateList.filter(e => e.appType === 10)[0]
            const wholesaleCategoryTemplate = this.categoryTemplateList.filter(e => e.appType === 11)[0]
            this.shopAppTmepData[this.shopAppTempMap[shopCategoryTemplate.templateType]]['show'] = true
            this.shopAppTmepData[this.shopAppTempMap[shopCategoryTemplate.templateType]]['showFlag'] = shopCategoryTemplate.quickBuy === 1
            this.wholesaleAppTmepData[this.wholesaleAppTempMap[wholesaleCategoryTemplate.templateType]]['show'] = true
            this.wholesaleAppTmepData[this.wholesaleAppTempMap[wholesaleCategoryTemplate.templateType]]['showFlag'] = wholesaleCategoryTemplate.quickBuy === 1
          } else {
            this.initList()
          }
          if (this.appType === '10') {
            this.tempData = this.shopAppTmepData
          } else {
            this.tempData = this.wholesaleAppTmepData
          }
        })
      },
      // 设置模板
      selTemp(item) {
        for (var key in this.tempData) {
          this.tempData[key].show = false
        }
        item.show = true
      },
      // 取消事件
      doCancel() {
        this.$emit('close')
      },
      // 确定事件
      doConfirm() {
        let shopBool = false
        let wholesaleBool = false
        // 各应用模板数据
        const shopCategoryTemplate = this.categoryTemplateList.filter(e => e.appType === 10)[0]
        const wholesaleCategoryTemplate = this.categoryTemplateList.filter(e => e.appType === 11)[0]
        // 赋值模板选择结果
        for (var key1 in this.shopAppTmepData) {
          const temp = this.shopAppTmepData[key1]
          if (temp.show) {
            shopBool = true
            shopCategoryTemplate.templateType = temp.type
            shopCategoryTemplate.quickBuy = temp.showFlag ? 1 : 0
          }
        }
        for (var key2 in this.wholesaleAppTmepData) {
          const temp = this.wholesaleAppTmepData[key2]
          if (temp.show) {
            wholesaleBool = true
            wholesaleCategoryTemplate.templateType = temp.type
          }
        }
        if (!shopBool) {
          this.$message.error('云店小程序请选择分类模板')
          return
        }
        if (!wholesaleBool && this.enterpriseConfig.wholesaleAuthority === 1) {
          this.$message.error('批发小程序请选择分类模板')
          return
        }
        saveList({ categoryTemplateList: this.categoryTemplateList }).then(response => {
          if (response.isError) return
          this.$message({ message: '保存成功', type: 'success' })
          this.$emit('close')
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .scroll-box {
    height: 420px;
    overflow: auto;
    overflow-x: hidden;
  }
  .sel-temp-layer {
    padding: 0 0 0 50px;
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    .temp-item{
      float: left;
      margin-right: 25px;
      &:last-child{
        margin-right: 0;
      }
    }
    h2 {
      font-size: 16px;
      color: #666;
    }
    .default {
      border: #e6e6e6 1px solid;
    }
    .actived {
      border: #409eff 1px solid;
    }
    .img-bar {
      position: relative;
      .tem-sel {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }
</style>